.jui {
  
  ul.tree {
  	position: relative;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #333;
    
    li {
	    > a, > span, > div {
        text-decoration: none; 
			  color: inherit;
        vertical-align: top;
        cursor: pointer;
	    }
    }
    
    li.active {
	    > a, > span, > div {
        color: #6633cc;
        font-weight: bold;
	    }
    }
    
    .drag {
    	position: absolute;
    	height: 2px;
    }
    .drag.on {
      background: #dcdcdc;
    }
  }
  
  ul.tree ul, ul.tree li {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  ul.tree-arrow-file {
  	.tree-arrow();
  }
  
  ul.tree-line-file {
  	.tree-line();
  }

  ul.tree-arrow {
    .tree-arrow();
  }

  ul.tree-line {
  	.tree-line();
  }
  
  ul.tree-arrow-file, ul.tree-line-file {
    li.open {
    	> a > i, > span > i, > div > i {
       	.settingTreeIconSize(15px, 14px, -17px, -165px);
      }
    }
    
    li.fold {
    	> a > i, > span > i, > div > i {
        .settingTreeIconSize(15px, 14px, -0px, -165px);
      }
    }
    
    li.leaf {
    	> a > i, > span > i, > div > i {
        	.settingTreeIconSize(14px, 14px, -36px, -165px);
      }
    }
    
    li {
      a > *:not(i), span > *:not(i), div > *:not(i) {
        margin-top: -6px;
      }
    }
  }

  // FUNCTIONS - Style
  .tree-arrow() {
  	margin-left: -13px;
    
    li {
		padding: 0 0 1px 13px; // bottom, left
    	
    	> a, > span, > div {
	    	display: inline-block;
	    	padding-top: 2px;
    	}
    }
    
    li.open > i {
        .settingTreeIconSize(15px, 15px, -13px, -130px);
    }
    
    li.fold > i {
    	.settingTreeIconSize(15px, 15px, -0px, -130px);
    }

    li.leaf > i {
    	.settingTreeIconSize(15px, 15px, 0, 0);
    }
  }
  
  // FUNCTIONS - Style
  .tree-line() {
  	ul {
  		margin-left: -3px;
  	}
  	
    li {
  		background: url("@{tree-line}") 0 0 no-repeat;
  		padding: 0 0 1px 17px; // bottom, left
        
  		> a, > span, > div {
  	   	display: inline-block;
  	   	padding-top: 2px;
  		}
    }
    
    li.open.root, li.fold.root {
      background-position: -100px 0px; // 백그라운드 이미지 제거
    }
    
    li.open > i, li.fold > i {
      margin-left: -17px;
      padding-left: 1px;
    }
    
    li.open > i {
        .settingTreeIconSize(16px, 16px, -0px, -111px);
    }

    li.open.root > i {
        .settingTreeIconSize(16px, 16px, -16px, -89px);
    }

    li.fold > i {
        .settingTreeIconSize(16px, 16px, -32px, -67px);
    }

    li.fold.root > i {
        .settingTreeIconSize(16px, 16px, -48px, -45px);
    }

    li.last {
    	/* ㄴ 형태의 백그라운드 이미지 */
		  background-position: 0 -1766px;
    }
  }
  
  // FUNCTIONS
  .settingTreeIconSize(@w, @h, @x, @y) {
    width: @w;
    height: @h;
    line-height: @h;
    background-position: @x @y;
    
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url("@{tree-list}");
  }
}
